<template>
	<view style="background-color:#F7F7F7 ;">
		<view class="device-list">
			<view class="top-box">
				<view class="input-search">
					<input type="text" placeholder="搜索场地名称" v-model="keywords" />
					<image src="../../static/images/home/切片@2x.png" @click="getAreaList"></image>
				</view>
				<!-- 	<view class="select-box">
					<view class="select-flex">
						<uni-data-select v-model="selected" :localdata="selectList"
							@change="onChange"></uni-data-select>
					</view>
					<view class="select-flex">
						<uni-data-select v-model="selectedStatus" :localdata="selectListStatus"
							@change="onChangeStatus"></uni-data-select>
					</view>
				</view> -->
			</view>
			<view class="device-list-box" v-if="datalist.length > 0">
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i">
					<view class="item-top">
						<view class="item-top-left">{{ item.name }}</view>
						<view class="item-top-right">{{ item.device_all }}台</view>
					</view>
					<view class="deviceContent">
						<image src="../../static/images/home/332325341备份 3@2x.png"></image>
						<view class="item-info">
							<view class="t0">场景：{{ item.type.name }}</view>
							<view class="t1">区域：{{ item.city }}</view>
							<view class="t2">创建：{{ formatDate(item.createtime) }}</view>
						</view>
					</view>
					<view class="deviceBottom">
						<view class="top">
							<view class="left">
								在线:{{ item.device_online ?? 0 }}
							</view>
							<view class="right" v-if="userInfo.user_id==item.user_id">
								分佣账户：{{ formatProxy(item.child) }}
							</view>
						</view>
						<view class="bottom">
							<view class="left">离线: {{ item.device_offline ?? 0 }}</view>
							<view class="right">
								<image src="../../static/images/area/编组@2x.png" mode=""></image>{{ item.address }}
							</view>
						</view>
					</view>
					<view class="btns">
						<button class="btn-blue" @click="clickBtns(1, item)">出泡泡</button>
						<button class="btn-blue" @click="clickBtns(2,item)"
							v-if="userInfo.user_id==item.user_id">计费管理</button>
						<button class="btn-yellow" @click="clickBtns(3, item)">设备管理</button>
						<button class="btn-green" @click="clickBtns(4,item)"
							v-if="userInfo.user_id==item.user_id">更多功能</button>

					</view>
				</view>
				<view class="more-tip">～没有更多了～</view>
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
			<button size="mini" class="btn" @click="addArea">+ 添加场地</button>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" @maskClick="maskClick">
			<view class="popup-content">
				<!-- 选择项 -->
				<view class="choice-item" v-for="(item, index) in choices" :key="index" @click="makeChoice(item)">
					{{ item.name }}
				</view>
				<button @click="maskClick">取消</button>
			</view>
		</uni-popup>
		<!-- 设置出泡泡时间 -->
		<view class="device-start" v-if="cppShow">
			<view class="start-box">
				<view class="t0">设置出泡泡</view>
				<uni-forms ref="dynamicForm" :rules="cppRules" :model="cppFormData" label-width="100px">
					<uni-forms-item label="场地名称">{{ cppFormData.name }}</uni-forms-item>
					<uni-forms-item label="出泡时间(秒)" required name="cpp">
						<uni-easyinput v-model="cppFormData.cpp" placeholder="请输入出泡时间" />
					</uni-forms-item>
				</uni-forms>
				<button size="mini" @click="setCpp('dynamicForm')" class="btn">提交</button>
			</view>
			<view class="close" @click="cppShow = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
		<!-- 待机引流 -->
		<view class="device-start" v-if="djylShow">
			<view class="start-box djyl-bg">
				<view class="t0">待机引流</view>
				<uni-forms :model="djylFormData" label-width="80px">
					<uni-forms-item label="场地名称">{{ djylFormData.name }}</uni-forms-item>
					<uni-forms-item label="引流时段">
						<view @click="selectStartTime" style="flex: 1;">{{djylFormData.yl_timed?djylFormData.yl_timed:'开始'}}</view>
						<uv-datetime-picker ref="startTimePicker" v-model="djylFormData.yl_timed" mode="time"
							@confirm="setStartTime">
						</uv-datetime-picker>
						<view style="color: #B0B0B0;font-size: 24rpx;flex: 1;">至</view>
						<view @click="selectEndTime" style="flex: 1;">{{djylFormData.yl_time_end?djylFormData.yl_time_end:'结束'}}</view>
						<uv-datetime-picker ref="endTimePicker" v-model="djylFormData.yl_time_end" mode="time" @confirm="setEndTime">
						</uv-datetime-picker>
					</uni-forms-item>
					<uni-forms-item label="待机间隔">
						<uv-input :clearable="false" type="number" v-model="djylFormData.yl_djjg"
							border="none"></uv-input>
						<view style="color: #B0B0B0;font-size: 24rpx;margin-right: 20rpx;">秒出泡泡</view>
						<uv-input :clearable="false" type="number" v-model="djylFormData.yl_cpp"
							border="none"></uv-input>
						<view style="color: #B0B0B0;font-size: 24rpx;">秒</view>
					</uni-forms-item>
					<!-- 		<uni-forms-item label="引流开关" required name="yl_kg">
						<switch :checked="djylFormData.yl_kg" color="#2F9AFE" />
					</uni-forms-item> -->
				</uni-forms>
				<view class="remark-tip">
					待机间隔:场地内设备最后订单时间到"待机间隔”。无效引流50次后引流终止。待消费或重设可重新开启引流。
				</view>
				<button size="mini" @click="setYl" class="btn">提交</button>
			</view>
			<view class="close" @click="djylShow = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
		<!-- 音量控制 -->
		<view class="device-start" v-if="volumeShow">
			<view class="start-box">
				<view class="t0">音量控制</view>
				<uni-forms ref="volumeForm" :rules="volumeFormRules" :model="volumeFormData" label-width="90px">
					<uni-forms-item label="场地" name="name" required>{{ volumeFormData.name }}</uni-forms-item>
					<uni-forms-item label="音量" required name="yinliang">
						<uni-easyinput v-model="volumeFormData.yinliang" placeholder="请输入音量" />
					</uni-forms-item>
				</uni-forms>
				<button size="mini" @click="setVol('volumeForm')" class="btn">提交</button>
			</view>
			<view class="close" @click="volumeShow = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
		<!-- 灯光控制 -->
		<view class="device-start" v-if="lightShow">
			<view class="start-box">
				<view class="t0">灯光控制</view>
				<uni-forms ref="lightForm" :rules="lightFormRules" :model="lightFormData" label-width="90px">
					<uni-forms-item label="场地" name="name" required>{{ lightFormData.name }}</uni-forms-item>
					<uni-forms-item label="开启时间" required name="dg_start">
						<picker class="time_picker" mode="time" start="00:00" end="23:59"
							:value="lightFormData.dg_start" @change="setLigthStart">
							<input placeholder="请选择开启时间" name="input" v-model="lightFormData.dg_start" disabled />
							<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="关闭时间" required name="dg_end">
						<!-- <uni-easyinput v-model="lightFormData.dg_end" placeholder="灯光结束时间" /> -->
						<picker class="time_picker" placeholder="灯光结束时间" mode="time" start="00:00" end="23:59"
							:value="lightFormData.dg_end" @change="setLigthEnd">
							<input placeholder="请选择关闭时间" name="input" v-model="lightFormData.dg_end" disabled />
							<view style="position: absolute; top: 0;bottom: 0;left: 0;right: 0;"> </view>
							<!-- <view>{{lightFormData.dg_end}}</view> -->
						</picker>
					</uni-forms-item>
				</uni-forms>
				<button size="mini" @click="setLight('lightForm')" class="btn">提交</button>
			</view>
			<view class="close" @click="lightShow = false">
				<image src="../../static/images/home/编组 5备份 6@2x.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	import {
		formatDate
	} from '@/common/utils.js';
	export default {
		data() {
			return {
				selected: '',
				userInfo: null,
				selectList: [{
						value: '1',
						text: '全部设备',
						isDefault: false
					},
					{
						value: '2',
						text: '在线',
						isDefault: true
					},
					{
						value: '3',
						text: '离线',
						isDefault: false
					},
					{
						value: '4',
						text: '水位过低预警',
						isDefault: false
					},
					{
						value: '5',
						text: '电量过低预警',
						isDefault: false
					},
					{
						value: '6',
						text: '所有故障',
						isDefault: false
					}
				],
				selectedStatus: '',
				selectListStatus: [{
						value: '1',
						text: '全部状态',
						isDefault: false
					},
					{
						value: '2',
						text: '启用',
						isDefault: true
					},
					{
						value: '3',
						text: '离线',
						isDefault: false
					}
				],
				keywords: null,
				datalist: [],
				cppShow: false,
				// 数据源
				cppFormData: {
					id: '',
					type: 1,
					name: '',
				},
				// 规则
				cppRules: {
					cpp: {
						rules: [{
							required: true,
							errorMessage: '出泡时间不能为空'
						}]
					}
				},
				choices: [{
						id: 1,
						name: '待机引流'
					},
					{
						id: 2,
						name: '彩灯开'
					},
					{
						id: 7,
						name: '彩灯关'
					},
					{
						id: 3,
						name: '音量控制'
					},
					{
						id: 4,
						name: '灯光控制'
					},
					{
						id: 5,
						name: '编辑'
					},
					{
						id: 6,
						name: '删除'
					}
				],
				djylShow: false, //待机引流
				// 待机引流数据源
				djylFormData: {
					id: '',
					name: '',
					yl_timed: '',
					yl_time_end:'',//引流结束时间
					yl_djjg: 0, // 时间间隔
					yl_cpp: 0, // 出泡泡时间 
					yl_kg: true

				},
				// 规则
				volumeShow: false, //音量控制
				// 声音数据源
				volumeFormData: {
					id: '',
					name: '',
					yinliang: ''
				},
				// 规则
				volumeFormRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '场所名称不能为空'
						}]
					},
					yinliang: {
						rules: [{
							required: true,
							errorMessage: '音量不能为空'
						}]
					}
				},
				lightShow: false, //灯光控制
				// 灯光数据源
				lightFormData: {
					id: '',
					name: '',
					dg_start: '',
					dg_end: ''
				},
				// 规则
				lightFormRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '场所名称不能为空'
						}]
					},
					dg_start: {
						rules: [{
							required: true,
							errorMessage: '灯光开始时间不能为空'
						}]
					},
					dg_end: {
						rules: [{
							required: true,
							errorMessage: '灯光结束时间不能为空'
						}]
					}
				},
				currentObj: {},

			};
		},
		onShow() {
			this.getAreaList();
			this.userInfo = uni.getStorageSync('userinfo')
		},
		methods: {
			getAreaList() {
				api.getGroundList({
					keywords: this.keywords
				}).then(res => {
					this.datalist = res.data;
				});
			},
			formatDate(d) {
				return formatDate(d);
			},
			formatProxy(child) {
				if (child.length) {
					return child.map(e => e.nickname).toString();
				} else {
					return "无"
				}
			},
			onChange(event) {
				console.log('选中的值：' + this.selected);
			},
			onChangeStatus(event) {
				console.log('选中的值：' + this.selectedStatus);
			},
			addArea() {
				uni.navigateTo({
					url: '/pages/area/areaAdd'
				});
			},
			clickBtns(type, item) {
				this.currentObj = item;
				if (type === 1) {
					this.cppFormData.name = item.name;
					this.cppFormData.id = item.id;
					this.cppFormData.cpp = item.cpp
					this.cppFormData.type = 1
					this.cppShow = true;
				}
				if (type === 2) {
					uni.navigateTo({
						url: '/pages/area/chargeManage?id=' + item.id
					});
				}
				if (type === 3) {
					uni.navigateTo({
						url: '/pages/device/list?id=' + item.id
					});
				}
				if (type === 4) {
					this.$refs.popup.open('bottom');

				}
			},
			maskClick() {
				this.$refs.popup.close();
			},
			//选择开始时间
			selectStartTime() {
				this.$refs.startTimePicker.open();
			},
			// 设置引渡开始时间
			setStartTime(e) {
				this.djylFormData.yl_timed = e.value
			},
			//选择结束时间
			selectEndTime() {
				this.$refs.endTimePicker.open();
			},
			// 引流结束时间
			setEndTime(e) {
				this.djylFormData.yl_time_end = e.value
			},
			//更多功能 
			makeChoice(choice) {
				this.maskClick();
				let e = choice.id;
				//待机引流
				if (e === 1) {
					this.djylFormData = {}
					this.djylFormData.type = 1
					this.djylFormData.name = this.currentObj.name
					this.djylFormData.id = this.currentObj.id
					this.djylFormData.yl_djjg = this.currentObj.yl_djjg
					this.djylFormData.yl_cpp = this.currentObj.yl_cpp
					this.djylFormData.yl_timed = this.currentObj.yl_timed
					this.djylFormData.yl_time_end = this.currentObj.yl_time_end
					this.djylShow = true;
				}
				// 彩灯开
				if (e === 2) {
					let cdFormData = {}
					cdFormData.id = this.currentObj.id
					cdFormData.led_kg = 1
					cdFormData.type = 1
					api.kgCommand(cdFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getAreaList();
						}
					})
				}
				// 彩灯关
				if (e === 7) {
					let cdFormData = {}
					cdFormData.id = this.currentObj.id
					cdFormData.led_kg = 0
					cdFormData.type = 1
					api.kgCommand(cdFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getAreaList();
						}
					})
				}
				// 音量控制
				if (e === 3) {
					this.volumeFormData = {}
					this.volumeFormData.type = 1
					this.volumeFormData.name = this.currentObj.name
					this.volumeFormData.id = this.currentObj.id
					this.volumeFormData.yinliang = this.currentObj.yinliang
					this.volumeShow = true;

				}
				// 灯光控制
				if (e === 4) {
					this.lightFormData = {}
					this.lightFormData.type = 1
					this.lightFormData.name = this.currentObj.name
					this.lightFormData.id = this.currentObj.id
					this.lightFormData.dg_start = this.currentObj.dg_start
					this.lightFormData.dg_end = this.currentObj.dg_end
					this.lightShow = true;
				}
				//编辑
				if (e === 5) {
					uni.navigateTo({
						url: '/pages/area/areaAdd?id=' + this.currentObj.id
					});
				}
				//删除
				if (e === 6) {
					api.delGround({
						id: this.currentObj.id
					}).then(res => {
						uni.showToast({
							icon: 'success',
							title: "删除成功！"
						})
						this.getAreaList();
					})
				}
			},
			// 设置出泡泡
			setCpp(form) {
				this.$refs[form].validate().then(res => {
					api.cppCommand(this.cppFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getAreaList();
						}
						this.cppShow = false;
					})
				})
			},
			//  设置引流
			setYl() {
				// this.djylFormData.yl_kg = this.djylFormData.yl_kg ? 1 : 0;
				api.ylGroundCommand(this.djylFormData).then(res => {
					if (res.code === 1) {
						uni.showToast({
							icon: 'success',
							title: "设置成功！"
						})
						this.getAreaList();
					}
					this.djylShow = false;
				})

			},
			//  设置音量
			setVol(form) {
				if (this.volumeFormData.yinliang > 30) {
					return uni.showToast({
						icon: 'none',
						title: "最大音量30"
					})
				}
				this.$refs[form].validate().then(res => {
					api.ylCommand(this.volumeFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getAreaList();
						}
						this.volumeShow = false;
					})
				})
			},
			setLigthStart(e) {
				this.lightFormData.dg_start = e.detail.value;
			},
			setLigthEnd(e) {
				this.lightFormData.dg_end = e.detail.value;
			},
			// 设置灯光
			setLight(form) {
				this.lightFormData.type = 1
				this.$refs[form].validate().then(res => {
					api.dgCommand(this.lightFormData).then(res => {
						if (res.code === 1) {
							uni.showToast({
								icon: 'success',
								title: "设置成功！"
							})
							this.getAreaList();
						}
						this.lightShow = false;
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				});
			}
		}
	};
</script>

<style lang="scss">
	.device-list {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.input-search {
				position: relative;

				uni-input {
					background: #ffffff;
					box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
					border-radius: 24rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #7d8592;
					padding: 24rpx 40rpx;
					font-style: normal;
				}

				uni-image {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 24rpx;
					top: 20rpx;
				}
			}

			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					margin-right: 40rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.device-list-box {
			padding-bottom: 200rpx;

			.device-list-item {
				background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 28rpx;
				border-radius: 28rpx;
				position: relative;
				margin: 0 -20rpx 20rpx;

				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-top-left {
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
						display: flex;
						align-items: center;
					}

					.item-top-right {
						font-weight: 500;
						font-size: 28rpx;
						color: #25ab64;
						line-height: 40rpx;
						font-style: normal;
					}
				}

				.deviceContent {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					uni-image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
					}

					.item-info {
						.t0 {
							font-weight: 500;
							font-size: 28rpx;
							color: #413100;
							line-height: 40rpx;
							font-style: normal;
						}

						.t1 {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}

						.t2 {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}
					}
				}

				.deviceBottom {
					.top {
						display: flex;
						margin-top: 12rpx;

						.left {
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 32rpx;
							font-style: normal;
							background: #25ab64;
							border-radius: 4rpx;
							padding: 0 6rpx;
							width: 104rpx;
							margin-right: 24rpx;
						}

						.right {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
						}
					}

					.bottom {
						display: flex;
						margin-top: 12rpx;
						border-bottom: 1px solid rgba(73, 161, 253, 0.2);
						padding-bottom: 24rpx;

						.left {
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							line-height: 32rpx;
							font-style: normal;
							background: #ff950a;
							border-radius: 4rpx;
							padding: 0 6rpx;
							width: 104rpx;
							margin-right: 24rpx;
						}

						.right {
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 34rpx;
							font-style: normal;
							display: inline-flex;
							align-items: center;
							justify-content: center;

							uni-image {
								width: 28rpx;
								height: 28rpx;
							}
						}
					}
				}

				.btns {
					display: flex;
					justify-content: end;
					margin-top: 20rpx;

					uni-button {
						font-weight: 500;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						padding: 8rpx;
						border-radius: 8rpx;
						margin: 0 0 0 20rpx;

						&.btn-blue {
							background: #49a1fd;
						}

						&.btn-green {
							background: #25ab64;
						}

						&.btn-yellow {
							background: #ff950a;
						}

						&.btn-red {
							background: #f95452;
						}
					}
				}
			}

			.more-tip {
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			font-style: normal;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}

		.empty-box {
			margin: 0 -20rpx;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				font-style: normal;
				margin-top: 50rpx;
				display: block;
			}
		}
	}

	.device-Using {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		.using-box {
			background: url('../../static/images/home/scan-bg.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 34rpx;

			.t0 {
				font-weight: 500;
				font-size: 44rpx;
				color: #000000;
				line-height: 60rpx;
				font-style: normal;
				padding-top: 40rpx;
			}

			.t1 {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 12rpx;
				margin: 50rpx 132rpx 40rpx;

				uni-image {
					width: 284rpx;
					height: 284rpx;
				}
			}

			.info {
				.info-t0 {
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 24rpx;
				}

				.info-t1 {
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 50rpx;
					font-style: normal;
					margin-top: 18rpx;
				}

				.info-t2 {
					font-weight: 400;
					font-size: 28rpx;
					color: #444444;
					line-height: 50rpx;
					font-style: normal;
				}
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.device-start {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: scroll;

		.start-box {
			background: url('../../static/images/home/编组 19@2x.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 84rpx 3%;
			text-align: center;
			padding-bottom: 20rpx;
			padding: 0rpx 40rpx 30rpx !important;

			&.djyl-bg {
				background: url('../../static/images/area/编组 19备份 5@2x.png') no-repeat;
				background-size: 100% 130%;
			}

			.t0 {
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 2.2rem;
				font-style: normal;
				padding-top: 10rpx;
			}


			.remark-tip {
				font-size: 24rpx;
				color: #a7a5a5;
				line-height: 34rpx;
				text-align: left;
				padding: 20rpx 0rpx 40rpx;
			}

			.btn {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 44rpx;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				width: 300rpx;
				line-height: 80rpx;
				margin: 30rpx auto 0;
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.time_picker {
		width: 100%;
		height: 40rpx;
	}
</style>